<template>
  <div>
    <!--<el-steps :active="active" simple>-->
    <!--<el-step title="创建试卷" icon="el-icon-edit"></el-step>-->
    <!--<el-step title="添加试题" icon="el-icon-upload"></el-step>-->
    <!--<el-step title="发布考试" icon="el-icon-picture"></el-step>-->
    <!--</el-steps>-->

    <el-row style="padding: 20px 0;margin-top: 20px" :gutter="20">
      <el-col :span="8">
        <div>
          <div class="left" v-for="(item, index) in allQuesList" :key="index">
            <div style="font-size: 14px;color:#666" v-if="item.quesType === 1">单选题</div>
            <div style="font-size: 14px;color:#666" v-else-if="item.quesType === 2">多选题</div>
            <div style="font-size: 14px;color:#666" v-else>判断题</div>
            <div
              style="font-size: 14px;color:#666"
            >共{{item.quesList.length}}题,共{{item.totalScore?item.totalScore:0}}分</div>
            <div style="font-size: 14px;color:#666">
              每题分数
              <el-input
                @blur="handlerQuesItemScoreChange(item.score,item,index)"
                v-model="item.score"
                type="number"
                style="width: 80px;margin-left: 5px;margin-right: 5px"
              ></el-input>分
            </div>
            <div>
              <el-button type="text" @click="handlerRemoveQues(index)">删除</el-button>
            </div>
          </div>

          <div class="left">
            <div>总题数:{{quesTotal}}题</div>
            <div>当前分数:{{score}}分</div>
          </div>
        </div>
      </el-col>

      <el-col :span="16">
        <div style="text-align: center;line-height: 50px">{{paperName}}</div>
        <div
          style="border-bottom: 1px solid #DEDEDE;padding-bottom: 10px;margin: 0;color: #333333;"
        ></div>
        <div
          v-if="quesSelectType===0"
          style="text-align: center;color: #999999;margin-top: 50px;margin-bottom: 10px"
        >当前试卷还是空空如也，点击下方添加新题型！</div>

        <div v-if="quesSelectType!==0" style="margin: 20px">
          <div v-for="(item, index) in allQuesList" :key="index" style="margin-top: 20px">
            <div style="display: flex;">
              <div style="font-size: 14px;color: #666;">{{item.title}}</div>
              <div
                class="el-icon-delete"
                style="margin-left: 10px"
                @click="handlerRemoveQues(index)"
              ></div>
            </div>
            <el-button
              type="primary"
              plain
              @click="addQues(index)"
              style="margin-top: 20px;margin-bottom: 20px"
            >添加试题</el-button>
            <!--单选-->
            <div v-if="item.quesType === 1">
              <div v-for="(childItem, childIndex) in item.quesList" :key="childIndex" class="ques">
                <div style="flex: 1">
                  <div v-html="childItem.info" class="ques-info"></div>
                  <div
                    class="ques-option"
                    v-for="(option, optionIndex) in childItem.options"
                    :key="optionIndex"
                  >
                    <span
                      v-if="option.option!==''"
                      :class="option.key===childItem.answer?'key-checked':'key-normal'"
                    >{{option.key}}</span>
                    :{{option.option}}
                  </div>
                  <div class="ques-answer">答案:{{childItem.answer}}</div>
                  <div class="ques-analysis">解析:{{childItem.analysis}}</div>
                </div>
                <div class="ques-score">
                  <span>分数</span>
                  {{childItem.score}}
                  <span>分</span>
                </div>
                <div
                  style="display: flex;flex-direction: column;justify-content: center;margin-left: 40px"
                >
                  <div>
                    <el-button>编辑</el-button>
                  </div>
                  <div style="margin-top: 10px">
                    <el-button @click="removeQues(index, childIndex)">删除</el-button>
                  </div>
                  <div style="margin-top: 10px">
                    <el-button @click="quesIndexUp(index, childIndex)">上移</el-button>
                  </div>
                  <div style="margin-top: 10px">
                    <el-button @click="quesIndexDown(index, childIndex)">下移</el-button>
                  </div>
                </div>
              </div>
            </div>
            <!--多选-->
            <div v-if="item.quesType === 2">
              <div v-for="(childItem, childIndex) in item.quesList" class="ques" :key="childIndex">
                <div style="flex: 1">
                  <div v-html="childItem.info" class="ques-info"></div>
                  <div
                    class="ques-option"
                    v-for="(option, optionIndex) in childItem.options"
                    :key="optionIndex"
                  >
                    <span
                      v-if="option.option!==''"
                      :class="childItem.answer.indexOf(option.key)!==-1?'key-checked':'key-normal'"
                    >{{option.key}}</span>
                    :{{option.option}}
                  </div>
                  <div class="ques-answer">答案:{{childItem.answer}}</div>
                  <div class="ques-analysis">解析:{{childItem.analysis}}</div>
                </div>
                <div class="ques-score">
                  <span>分数</span>
                  {{childItem.score}}
                  <span>分</span>
                </div>
                <div
                  style="display: flex;flex-direction: column;justify-content: center;margin-left: 40px"
                >
                  <!--                  <div>-->
                  <!--                    <el-button >编辑</el-button>-->
                  <!--                  </div>-->
                  <div style="margin-top: 10px">
                    <el-button @click="removeQues(index, childIndex)">删除</el-button>
                  </div>
                  <div style="margin-top: 10px">
                    <el-button @click="quesIndexUp(index, childIndex)">上移</el-button>
                  </div>
                  <div style="margin-top: 10px">
                    <el-button @click="quesIndexDown(index, childIndex)">下移</el-button>
                  </div>
                </div>
              </div>
            </div>
            <!--判断-->
            <div v-if="item.quesType === 3">
              <div v-for="(childItem, childIndex) in item.quesList" :key="childIndex" class="ques">
                <div style="flex: 1">
                  <div v-html="childItem.info" class="ques-info"></div>
                  <div
                    :class="childItem.answer===1?'ques-judge-option-checked':'ques-judge-option-normal'"
                  >
                    <i class="el-icon-check"></i>对
                  </div>
                  <div
                    :class="childItem.answer===0?'ques-judge-option-checked':'ques-judge-option-normal'"
                  >
                    <i class="el-icon-close"></i>错
                  </div>
                  <div class="ques-answer">答案:{{childItem.answer===1?'对':'错'}}</div>
                  <div class="ques-analysis">解析:{{childItem.analysis}}</div>
                </div>
                <div class="ques-score">
                  <span>分数</span>
                  {{childItem.score}}
                  <span>分</span>
                </div>
                <div
                  style="display: flex;flex-direction: column;justify-content: center;margin-left: 40px"
                >
                  <div>
                    <el-button>编辑</el-button>
                  </div>
                  <div style="margin-top: 10px">
                    <el-button @click="removeQues(index, childIndex)">删除</el-button>
                  </div>
                  <div style="margin-top: 10px">
                    <el-button @click="quesIndexUp(index, childIndex)">上移</el-button>
                  </div>
                  <div style="margin-top: 10px">
                    <el-button @click="quesIndexDown(index, childIndex)">下移</el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div
          style="border-bottom: 1px solid #DEDEDE;padding-bottom: 10px;margin: 0;color: #333333;"
        ></div>
        <div>
          <el-dropdown @command="handleCommand" style="margin-top: 20px">
            <el-button type="primary">
              添加试题
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">单选题</el-dropdown-item>
              <el-dropdown-item command="2">多选题</el-dropdown-item>
              <el-dropdown-item command="3">判断题</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button type="primary" @click="handlerSaveQues" :loading="loading">保存</el-button>
        </div>
      </el-col>
    </el-row>

    <!--多选题对话框-->
    <el-dialog
      title="多选题"
      :visible.sync="dialogMultiTableVisible"
      :before-close="handlerBeforeClose"
    >
      <div style="display: flex;flex-direction: row;margin: 20px">
        <div style="font-size: 12px;color:#494949;margin-right: 20px">
          工种类型
          <el-select v-model="quesCateId" filterable placeholder="请选择">
            <el-option v-for="item in cateList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <div style="font-size: 12px;color:#494949;margin-left: 20px">
          试题难度
          <el-select v-model="quesLevel" filterable placeholder="请选择">
            <el-option
              v-for="item in levelList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </div>
        <div>
          <el-button type="small" style="margin-left: 20px" @click="queryList">查询</el-button>
        </div>
      </div>

      <el-table
        :data="multiQuesList"
        border
        v-loading="dataListLoading"
        @selection-change="selectionMultiChangeHandle"
        style="width: 100%;"
      >
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column align="center" type="index" header-align="center" width="80" label="ID"></el-table-column>
        <el-table-column header-align="center" align="center" label="题干内容" width="450">
          <template slot-scope="scope">
            <div v-html="scope.row.info"></div>
          </template>
        </el-table-column>
        <el-table-column prop="cateName" header-align="center" align="center" label="工种"></el-table-column>
        <el-table-column
          prop="level"
          header-align="center"
          align="center"
          label="试题难度"
          :formatter="formatterLevel"
        ></el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>

      <div style="text-align: center;margin-top: 50px">
        <el-button @click="handlerCloseMultiQues">关闭</el-button>
        <el-button type="success" @click="handlerSaveMultiQues">确定</el-button>
      </div>
    </el-dialog>

    <!--单项选择题对话框-->
    <el-dialog
      title="单选题"
      :visible.sync="dialogSingerTableVisible"
      :before-close="handlerBeforeClose"
    >
      <div style="display: flex;flex-direction: row;margin: 20px">
        <div style="font-size: 12px;color:#494949;margin-right: 20px">
          工种类型:
          <el-select v-model="quesCateId" filterable placeholder="请选择">
            <el-option v-for="item in cateList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <div style="font-size: 12px;color:#494949; margin-left: 20px">
          试题难度:
          <el-select v-model="quesLevel" filterable placeholder="请选择">
            <el-option
              v-for="item in levelList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </div>
        <div>
          <el-button type="small" style="margin-left: 20px" @click="queryList">查询</el-button>
        </div>
      </div>

      <el-table
        :data="singerQuesList"
        border
        v-loading="dataListLoading"
        @selection-change="selectionSingerChangeHandle"
        style="width: 100%;"
      >
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column align="center" type="index" header-align="center" width="80" label="ID"></el-table-column>
        <el-table-column header-align="center" align="center" label="题干内容" width="450">
          <template slot-scope="scope">
            <div v-html="scope.row.info"></div>
          </template>
        </el-table-column>
        <el-table-column prop="cateName" header-align="center" align="center" label="工种"></el-table-column>
        <el-table-column
          prop="level"
          header-align="center"
          align="center"
          label="试题难度"
          :formatter="formatterLevel"
        ></el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>

      <div style="text-align: center;margin-top: 50px">
        <el-button @click="handlerCloseSingerQues">关闭</el-button>
        <el-button type="success" @click="handlerSaveSingerQues">确定</el-button>
      </div>
    </el-dialog>

    <!--判断题对话框-->
    <el-dialog
      title="判断题"
      :visible.sync="dialogJudgeTableVisible"
      :before-close="handlerBeforeClose"
    >
      <div style="display: flex;flex-direction: row;margin: 20px">
        <div style="font-size: 12px;color:#494949;margin-right: 20px">
          工种类型
          <el-select v-model="quesCateId" filterable placeholder="请选择">
            <el-option v-for="item in cateList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <div style="font-size: 12px;color:#494949;margin-left: 20px">
          试题难度
          <el-select v-model="quesLevel" filterable placeholder="请选择">
            <el-option
              v-for="item in levelList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </div>
        <div>
          <el-button type="small" style="margin-left: 20px" @click="queryList">查询</el-button>
        </div>
      </div>

      <el-table
        :data="judgeQuesList"
        border
        v-loading="dataListLoading"
        @selection-change="selectionJudgeChangeHandle"
        style="width: 100%;"
      >
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column align="center" type="index" header-align="center" width="80" label="ID"></el-table-column>
        <el-table-column
          prop="judgeqstInfo"
          header-align="center"
          align="center"
          label="题干内容"
          width="450"
        >
          <template slot-scope="scope">
            <div v-html="scope.row.info"></div>
          </template>
        </el-table-column>
        <el-table-column prop="cateName" header-align="center" align="center" label="工种"></el-table-column>
        <el-table-column
          prop="level"
          header-align="center"
          align="center"
          label="试题难度"
          :formatter="formatterLevel"
        ></el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>

      <div style="text-align: center;margin-top: 50px">
        <el-button @click="handlerCloseJudgeQues">关闭</el-button>
        <el-button type="success" @click="handlerSaveJudgeQues">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      paperId: this.$route.query.paperId,
      allQuesList: [],
      cateList: [],
      multiQuesList: [],
      singerQuesList: [],
      judgeQuesList: [],
      allQuesIndex: 0,
      loading: false,
      levelList: [
        {
          key: 0,
          value: '简单'
        },
        {
          key: 1,
          value: '正常'
        },
        {
          key: 2,
          value: '困难'
        }
      ],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      multiQuesListSelections: [],
      singerQuesListSelections: [],
      judgeQuesListSelections: [],
      dataListLoading: false,
      dialogMultiTableVisible: false,
      dialogSingerTableVisible: false,
      dialogJudgeTableVisible: false,
      quesTotal: 0,
      score: 0,
      active: 1,
      paperName: this.$route.query.name,
      compType: this.$route.query.compType,
      paperCateId: this.$route.query.cateId,
      quesCateId: '',
      quesLevel: '',
      quesSelectType: 0,
      currentQuesType: 0
    }
  },
  mounted() {},
  methods: {
    getQuesCateList() {
      this.$http({
        url: this.$http.adornUrl(`/exam-admin/ques/cate/select`),
        method: 'get'
      })
        .then(data => {
          this.cateList = data.data
        })
        .then(() => {
          switch (this.quesSelectType) {
            case 1:
              this.dialogSingerTableVisible = true
              this.getSingerQuesList()
              break
            case 2:
              this.dialogMultiTableVisible = true
              this.getMultiQuesList()
              break
            case 3:
              this.dialogJudgeTableVisible = true
              this.getJudgeQuesList()
              break
          }
        })
    },
    // 获取数据列表
    getJudgeQuesList() {
      let excludeIds = []
      for (let i = 0; i < this.allQuesList.length; i++) {
        if (this.allQuesList[i].quesType === this.currentQuesType) {
          let quesList = this.allQuesList[i].quesList
          for (let j = 0; j < quesList.length; j++) {
            excludeIds.push(quesList[j].id)
          }
        }
      }
      // let quesList = this.allQuesList[this.allQuesIndex].quesList
      // let excludeIds = ''
      // for (let i = 0; i < quesList.length; i++) {
      //   excludeIds += quesList[i].id + ','
      // }
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/exam-admin/ques/judge/list'),
        method: 'post',
        data: {
          page:
            excludeIds || this.quesCateId || this.quesLevel
              ? ''
              : this.pageIndex,
          limit: this.pageSize,
          excludeIds: excludeIds,
          quesCateId: this.quesCateId,
          quesLevel: this.quesLevel
        }
      }).then(data => {
        if (data && data.code === 200) {
          this.judgeQuesList = data.data.list
          this.totalPage = data.data.totalCount
        } else {
          this.judgeQuesList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    queryList() {
      this.getJudgeQuesList()
      this.getQuesCateList()
      this.getMultiQuesList()
    },
    // 获取数据列表
    getMultiQuesList() {
      let excludeIds = []
      for (let i = 0; i < this.allQuesList.length; i++) {
        if (this.allQuesList[i].quesType === this.currentQuesType) {
          let quesList = this.allQuesList[i].quesList
          for (let j = 0; j < quesList.length; j++) {
            excludeIds.push(quesList[j].id)
          }
        }
      }
      // let quesList = this.allQuesList[this.allQuesIndex].quesList
      // let excludeIds = ''
      // for (let i = 0; i < quesList.length; i++) {
      //   excludeIds += quesList[i].id + ','
      // }
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/exam-admin/ques/multi/list'),
        method: 'post',
        data: {
          page:
            excludeIds || this.quesCateId || this.quesLevel
              ? ''
              : this.pageIndex,
          limit: this.pageSize,
          excludeIds: excludeIds,
          quesCateId: this.quesCateId,
          quesLevel: this.quesLevel
        }
      }).then(data => {
        if (data && data.code === 200) {
          this.multiQuesList = data.data.list
          this.totalPage = data.data.totalCount
        } else {
          this.multiQuesList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 获取数据列表
    getSingerQuesList() {
      let excludeIds = []
      for (let i = 0; i < this.allQuesList.length; i++) {
        if (this.allQuesList[i].quesType === this.currentQuesType) {
          let quesList = this.allQuesList[i].quesList
          for (let j = 0; j < quesList.length; j++) {
            excludeIds.push(quesList[j].id)
          }
        }
      }
      // let quesList = this.allQuesList[this.allQuesIndex].quesList
      // let excludeIds = ''
      // for (let i = 0; i < quesList.length; i++) {
      //   excludeIds += quesList[i].id + ','
      // }
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/exam-admin/ques/singer/list'),
        method: 'post',
        data: {
          page:
            excludeIds || this.quesCateId || this.quesLevel
              ? ''
              : this.pageIndex,
          limit: this.pageSize,
          excludeIds: excludeIds,
          quesCateId: this.quesCateId,
          quesLevel: this.quesLevel
        }
      }).then(data => {
        if (data && data.code === 200) {
          this.singerQuesList = data.data.list
          this.totalPage = data.data.totalCount
        } else {
          this.singerQuesList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    handleCommand(val) {
      this.quesSelectType = parseInt(val)
      switch (this.quesSelectType) {
        case 1:
          this.allQuesList.push({
            quesType: 1,
            title: '单选题',
            quesList: [],
            score: 0
          })
          break
        case 2:
          this.allQuesList.push({
            quesType: 2,
            title: '多选题',
            quesList: [],
            score: 0
          })
          break
        case 3:
          this.allQuesList.push({
            quesType: 3,
            title: '判断题',
            quesList: [],
            score: 0
          })
          break
      }
    },
    addQues(index) {
      this.allQuesIndex = index
      this.quesSelectType = this.allQuesList[index].quesType
      this.currentQuesType = this.allQuesList[index].quesType
      this.pageIndex = 1
      this.pageSize = 10
      this.totalPage = 0
      switch (this.quesSelectType) {
        case 1:
          this.dialogSingerTableVisible = true
          this.getQuesCateList()
          break
        case 2:
          this.dialogMultiTableVisible = true
          this.getQuesCateList()
          break
        case 3:
          this.dialogJudgeTableVisible = true
          this.getQuesCateList()
          break
      }
    },
    handlerBeforeClose() {
      this.dialogMultiTableVisible = false
      this.dialogSingerTableVisible = false
      this.dialogJudgeTableVisible = false
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      switch (this.quesSelectType) {
        case 1:
          this.getSingerQuesList()
          break
        case 2:
          this.getMultiQuesList()
          break
        case 3:
          this.getJudgeQuesList()
          break
      }
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      switch (this.quesSelectType) {
        case 1:
          this.getSingerQuesList()
          break
        case 2:
          this.getMultiQuesList()
          break
        case 3:
          this.getJudgeQuesList()
          break
      }
    },
    // 多选
    selectionMultiChangeHandle(val) {
      this.multiQuesListSelections = val
    },
    // 单选
    selectionSingerChangeHandle(val) {
      this.singerQuesListSelections = val
    },
    // 判断
    selectionJudgeChangeHandle(val) {
      this.judgeQuesListSelections = val
    },
    formatterLevel(row, column) {
      switch (row.level) {
        case 0:
          return '简单'
        case 1:
          return '正常'
        case 2:
          return '困难'
      }
    },
    // 保存多项选择题结果
    handlerSaveMultiQues() {
      this.pageIndex = 1
      this.pageSize = 10
      this.totalPage = 0
      for (let i = 0; i < this.multiQuesListSelections.length; i++) {
        this.allQuesList[this.allQuesIndex].quesList.push({
          id: this.multiQuesListSelections[i].id,
          info: this.multiQuesListSelections[i].info,
          options: this.multiQuesListSelections[i].questionOptionEntities,
          answer: this.multiQuesListSelections[i].answ.toUpperCase(),
          analysis: this.multiQuesListSelections[i].analysis,
          score: this.allQuesList[this.allQuesIndex].score
        })
      }
      this.quesTotal = this.getQuesTotalNum(this.allQuesList)
      this.dialogMultiTableVisible = false
      this.quesTotalScore()
      this.quesCurrentTotalScore(this.allQuesIndex)
    },
    // 清空多项选择题结果
    handlerCloseMultiQues() {
      this.pageIndex = 1
      this.pageSize = 10
      this.totalPage = 0
      this.multiQuesListSelections = []
      this.dialogMultiTableVisible = false
    },
    // 保存单项选择题结果
    handlerSaveSingerQues() {
      this.pageIndex = 1
      this.pageSize = 10
      this.totalPage = 0
      for (let i = 0; i < this.singerQuesListSelections.length; i++) {
        this.allQuesList[this.allQuesIndex].quesList.push({
          id: this.singerQuesListSelections[i].id,
          info: this.singerQuesListSelections[i].info,
          options: this.singerQuesListSelections[i].questionOptionEntities,
          answer: this.singerQuesListSelections[i].answ.toUpperCase(),
          analysis: this.singerQuesListSelections[i].analysis,
          score: this.allQuesList[this.allQuesIndex].score
        })
      }
      this.quesTotal = this.getQuesTotalNum(this.allQuesList)
      this.dialogSingerTableVisible = false
      this.quesTotalScore()
      this.quesCurrentTotalScore(this.allQuesIndex)
    },
    // 清空单项选择题结果
    handlerCloseSingerQues() {
      this.pageIndex = 1
      this.pageSize = 10
      this.totalPage = 0
      this.singerQuesListSelections = []
      this.dialogSingerTableVisible = false
    },
    // 保存判断题结果
    handlerSaveJudgeQues() {
      this.pageIndex = 1
      this.pageSize = 10
      this.totalPage = 0
      for (let i = 0; i < this.judgeQuesListSelections.length; i++) {
        this.allQuesList[this.allQuesIndex].quesList.push({
          id: this.judgeQuesListSelections[i].id,
          info: this.judgeQuesListSelections[i].info,
          answer: this.judgeQuesListSelections[i].answ,
          analysis: this.judgeQuesListSelections[i].analysis,
          score: this.allQuesList[this.allQuesIndex].score
        })
      }
      this.quesTotal = this.getQuesTotalNum(this.allQuesList)
      this.dialogJudgeTableVisible = false
      this.quesTotalScore()
      this.quesCurrentTotalScore(this.allQuesIndex)
    },
    // 清空判断题结果
    handlerCloseJudgeQues() {
      this.pageIndex = 1
      this.pageSize = 10
      this.totalPage = 0
      this.judgeQuesListSelections = []
      this.dialogJudgeTableVisible = false
    },
    // 删除题
    removeQues(index, childIndex) {
      this.allQuesList[index].quesList.splice(childIndex, 1)
      this.quesTotalScore()
      this.quesCurrentTotalScore(index)
    },
    // 两个元素交换位置
    swapArray(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
      return arr
    },
    // 下移
    zIndexDown(arr, index, length) {
      if (index + 1 !== length) {
        this.swapArray(arr, index, index + 1)
      } else {
        alert('已经处于置顶，无法上移')
      }
    },
    // 上移
    zIndexUp(arr, index, length) {
      if (index !== 0) {
        this.swapArray(arr, index, index - 1)
      } else {
        alert('已经处于置底，无法下移')
      }
    },
    // 置顶
    zIndexTop(arr, index, length) {
      if (index + 1 !== length) {
        // 首先判断当前元素需要上移几个位置,置底移动到数组的第一位
        let moveNum = length - 1 - index

        // 循环出需要一个一个上移的次数
        for (let i = 0; i < moveNum; i++) {
          this.swapArray(arr, index, index + 1)
          index++
        }
      } else {
        alert('已经处于置顶')
      }
    },
    // 置底
    zIndexBottom(arr, index, length) {
      if (index !== 0) {
        // 首先判断当前元素需要上移几个位置,置底移动到数组的第一位
        let moveNum = index - 0

        // 循环出需要一个一个上移的次数
        for (let i = 0; i < moveNum; i++) {
          this.swapArray(arr, index, index - 1)
          index--
        }
      } else {
        alert('已经处于置底')
      }
    },
    quesIndexUp(index, childIndex) {
      this.zIndexUp(
        this.allQuesList[index].quesList,
        childIndex,
        this.allQuesList[index].quesList.length
      )
    },
    quesIndexDown(index, childIndex) {
      this.zIndexDown(
        this.allQuesList[index].quesList,
        childIndex,
        this.allQuesList[index].quesList.length
      )
    },
    // 计算题总数
    getQuesTotalNum() {
      let quesTotal = 0
      for (let i = 0; i < this.allQuesList.length; i++) {
        let quesList = this.allQuesList[i].quesList
        if (quesList && quesList.length > 0) {
          quesTotal += quesList.length
        }
      }
      return quesTotal
    },
    // 设置每道题的分数
    handlerQuesItemScoreChange(value, item, index) {
      let quesList = item.quesList
      item.totalScore = 0
      for (let i = 0; i < quesList.length; i++) {
        quesList[i].score = value
        item.totalScore += parseFloat(quesList[i].score)
      }
      this.quesTotalScore()
    },
    // 计算总分
    quesTotalScore() {
      this.score = 0
      // 计算总分数
      for (let i = 0; i < this.allQuesList.length; i++) {
        let quesList = this.allQuesList[i].quesList
        for (let j = 0; j < quesList.length; j++) {
          this.score += parseFloat(quesList[j].score)
        }
      }
    },
    // 计算当前题型的所有分数
    quesCurrentTotalScore(index) {
      let item = this.allQuesList[index]
      item.totalScore = 0
      let quesList = item.quesList
      for (let i = 0; i < quesList.length; i++) {
        item.totalScore += parseFloat(quesList[i].score)
      }
    },
    // 保存试卷
    handlerSaveQues() {
      if (!this.allQuesList || this.allQuesList.length <= 0) {
        this.$message.warning('请添加试题')
        return false
      }
      for (let i = 0; i < this.allQuesList.length; i++) {
        if (
          !this.allQuesList[i].quesList ||
          this.allQuesList[i].quesList.length <= 0
        ) {
          this.$message.warning('请添加试题')
          return false
        }
        if (!this.allQuesList[i].score) {
          this.$message.warning('请填写每题分数')
          return false
        }
      }
      this.loading = true
      this.$http({
        url: this.$http.adornUrl('/exam-admin/paper/save'),
        method: 'post',
        data: {
          paperName: this.paperName,
          cateId: this.paperCateId,
          totalper: this.score,
          compType: this.compType,
          quesInfo: JSON.stringify(this.allQuesList)
        }
      }).then(data => {
        if (data && data.code === 200) {
          this.$message.success('操作成功')
          this.$router.push({
            name: 'paper-paper'
          })
        } else {
          this.$message.warning(data.msg)
        }
        this.loading = false
      })
    },
    handlerRemoveQues(index) {
      this.allQuesList.splice(index, 1)
    }
  }
}
</script>

<style scoped>
.left {
  margin-top: 30px;
  width: 100%;
  border: 1px solid #dedede;
  border-radius: 4px;
  padding: 20px 15px 20px 15px;
  font-size: 14px;
  color: #666;
}

.left div {
  line-height: 30px;
}

.ques-info {
  flex: 1;
  font-size: 14px;
  color: #333333;
  word-wrap: break-word;
  word-break: normal;
}

.ques-option {
  font-size: 12px;
  color: #666666;
  text-align: left;
  margin-top: 10px;
}

.ques-judge-option-checked {
  font-size: 12px;
  color: #1a8caa;
  text-align: left;
  margin-top: 10px;
}

.ques-judge-option-normal {
  font-size: 12px;
  color: #666666;
  text-align: left;
  margin-top: 10px;
}

.ques-answer {
  font-size: 12px;
  color: #666666;
  text-align: left;
  margin-top: 20px;
}

.ques-analysis {
  font-size: 12px;
  color: #666666;
  text-align: left;
  margin-top: 10px;
}

.ques-score {
  display: flex;
  font-size: 12px;
  color: #666666;
  justify-content: center;
  align-items: center;
}

.ques {
  display: flex;
  flex-direction: row;
  background: #f6f7fa;
  border-radius: 4px;
  margin-bottom: 21px;
  padding: 12px 12px 12px 22px;
  font-size: 12px;
  color: #666666;
  text-align: left;
}

.key-normal {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px #333333 solid;
  text-align: center;
  line-height: 16px;
}

.key-checked {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  text-align: center;
  line-height: 16px;
  color: #ffffff;
  background: #1a8caa;
}
</style>
